<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水平居中与堆叠顺序</title>
	<style>
		.juzhong {
			width: 200px;
			height: 200px;
			background-color: pink;

			position: absolute;
			
			/* 当盒子设置 绝对定位后，这个margin 居中是不起作用的 */
			margin: auto;

			/* 正确设置 */
			/* 1. 让盒子整个又移动50% */
			left: 50%; 
			/* 2. 让盒子再向左移动自身的一半*/
			margin-left: -100px;
 
			top: 50%;
			margin-top: -100px; 
		}
		
		/* 堆叠顺序，一般来说是 顺序堆叠，这里 sanmao > ermao > damao 
			可以使用 z-index 调整盒子的堆叠顺序（只用于定位里面）
			取值为整数（正，负，0），没单位。谁显示在上面
		*/

		.damao {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: blue;
			/* 把damao放到上面 */
			z-index: 1;
		}


		.ermao {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: pink;
		}


		.sanmao {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="juzhong"></div>

	<div class="damao"></div>
	<div class="ermao"></div>
	<div class="sanmao"></div>
</body>
</html>